import React, { FC, useEffect, useState } from 'react'
import {inject,observer} from 'mobx-react'
import Mytitle from '../../../../components/Mytitle'
import { Avatar, Button, Form, message, Modal, Popconfirm, Result, Select, Table, Tag, Tooltip } from 'antd'
import { roleList } from '../../../../utils'
import { ajax } from '../../../../api'
import {

  DeleteOutlined,
  CloseCircleOutlined,
  SearchOutlined,
  FormOutlined
 
  
} from '@ant-design/icons';
import { baseURL } from '../../../../api/request'
const {Option} = Select 
const List:FC<any>=({
  uinfo,
  user
})=> {
  const {filterUserList,userList_filter,changeuser}=user
  //当前用户信息
  const {userInfo}=uinfo
  const [form] = Form.useForm()
  const [id,setId]=useState(0)
  useEffect(()=>{
    //获取过滤自己用户数据
    filterUserList(userInfo._id)
  },[])

  //控制修改密码的密码对话框显示
  const [show,setShow] = useState<boolean>(false)
  //确认修改
  const handleOk=()=>{
    form.validateFields().then(value=>{
      console.log(value)
      value.id=id
     ajax.changeuserRole(value).then(result=>{
      setShow(false)
      //修改成功后，重新查询表
      filterUserList(userInfo._id)
     })
    })
  }
  const handleCancel=()=>{
      setShow(false)
      
      
  }
  //点击修改权限
  const changeRole=(item:any)=>{
      setShow(true)
      setId(item._id)
  }

  const onFinish=async(values: any)=>{
    console.log(values);
    
      
    }
    
 const onFinishFailed=()=>{
   message.error("请选择修改的权限")
 }
  
  const columns:any = [
    {
      title: '序号',
      dataIndex: '_v',
      render:(text:any,item:any,index:any)=>{
        return index+1
      },
      align:'center',
      width:'80px'
      
    },
    {
      title: '头像',
      align:'center' ,
      render(value:any,item:any,index:any){
        return (
          item.avatar?<Avatar src={item.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
        )
      },
      width:'80px',
      
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width:'200px',
      ellipsis:true
    }, 
    {
      title: '联系电话',
      dataIndex: 'phone',
      width:'200px',
      ellipsis:true
    }, 
    {
      title:"权限"  ,
      align:'center' ,
      width:"80px",
      dataIndex:"role",
      render(value:any,item:any,index:any){
        return (
          <Tag color={roleList.find(item=>item.value==value)?.color}>
            {roleList.find(item=>item.value==value)?.label}
          </Tag>
        )
      }
    },
    {
      title:"操作"  ,
      align:'center' ,
      width:"80px",
      render(value:any,item:any,index:any){
        return (
         <div>
           <Tooltip title="点击修改用户权限">
                <Button  onClick={()=>changeRole(item)} disabled={userInfo.role<item.role} size="small" shape="circle" icon={<FormOutlined />} type="primary"></Button>
            </Tooltip>
         </div>
        )
      }
    },
  ];

  return (
    <div>
        {/* <Mytitle text="用户展示"></Mytitle> */}
        <div className='list_div'>
        <Table dataSource={userList_filter} columns={columns} pagination={{pageSize:5}} />
        </div>

              {/* 修改权限弹出框 */}
          <Modal  
            title="修改用户权限" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定修改"
            cancelText="取消"
            okType="danger"
        >
          <Form
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          form={form}
          layout={"vertical"}
          >
        <Form.Item
          name="type"
          label="选择权限"
          rules={[{ required: true, message: '请选择' }]}
        >
          <Select  style={{ width: '100%' }} >
              {
              roleList.filter((v:any)=>v.value<=userInfo.role).map((item: any,index: any)=>(
                <Option
                  key={index} 
                  value={item.value}
                  >
                    {item.label} 
                  </Option>
              ))
              }
          </Select>
        </Form.Item>
          </Form>
          
        </Modal>
    </div>
  )
}

export default inject("user",'uinfo')(observer(List))